<template>
    <div>
        <div class="titler">
            <img src="../../assets/头部.png" alt="">
        </div>
        <div class="logo">
            <img src="../../assets/注册.png" alt="">
        </div>
        <div class="from">
            <div class="from_group">
                <input type="text" placeholder="请输入手机号码" v-model="phone">
                <span class="check-message"  ref="span1">请输入正确的手机号码</span>
            </div>
            <div class="from_group">
                <input type="password" placeholder="请输入密码" v-model="password">
                <span class="check-message"  ref="span2">请输入正确的密码</span>
            </div>
        </div>
        <div class="anniu">
            <button  @click="login">登录</button>
        </div>
        <div class="footer">    
            <div> <router-link to="/register">立即注册</router-link></div>
            <div> <router-link to="/register">忘记密码</router-link></div>
        </div>
        <!-- <slider-captcha /> -->
    </div>


</template>

<script setup>
import { Dialog } from 'vant';

import {ref} from "vue"
import {post} from "../../login/request"
import {useRouter} from  "vue-router";
import SliderCaptcha from '@/components/SliderCaptcha.vue';
const router = useRouter();
let phone = ref('')
let password = ref('')
let span1= ref('')
let span2= ref('')

//校验手机号码的合法性
function checkPhone () {
    let uNameReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g
    if (uNameReg.test(phone.value)) {
        span1.value.style.display="none"
    } else {
        span1.value.style.display="block"
    }
}
//校验密码的合法性
function checkCard () {
    let uNameReg = /^(0|[1-9][0-9]*)$/g
    if (uNameReg.test(password.value)) {
        span2.value.style.display="none"
    } else {
        span2.value.style.display="block"
    }
}

let login = async()=>{

    checkPhone (phone)
    checkCard (password)
    let data={
        phone:phone.value,
        password:password.value,
    };
    console.log(phone);
    console.log(password);
    let result =await post('/login',data)
    sessionStorage.setItem("token", result.result.token)
    // sessionStorage.setItem("isLogin", true)
    // console.log(result.result.token)
    

    //弹窗
    Dialog.confirm({
        title: '登录成功',
        message:
            '请确认是否跳到首页',
    })
    .then(() => {
    // on confirm
        router.push("./")
    })
    .catch(() => {
    // on cancel
        router.push("/login")
    });

}

</script>

<style lang="scss" scoped>
.titler{
    width: 100%;
    height: 0.2rem;
}
.logo{
    margin-top: 1.4rem;
    margin-left: 1.55rem;
    width: 0.66rem;
    height: 0.66rem;
}
.from {
    margin-top: 0.1rem;
    margin-left: 0.3rem;
    width: 3.25rem;
    height: 2rem;
}
.from_group{
    width: 3.25rem;
    height: 0.8rem;

    input{
        padding-left: 0.2rem;
        width: 3.03rem;
        height: 0.5rem;
        background:none;  
	    outline:none;  
	    border:none;
        background-color: #F9F9F9;
    }

    .check-message{
        width: 2rem;
        height: 0.2rem;
        font-size: 0.14rem;
        color:red;
        display: none;
    }

}

.anniu{
    margin-top: 0.1rem;
    margin-left: 0.3rem;
    width: 3.25rem;
    height: 0.6rem;

    button{
        width: 3.25rem;
        height: 0.6rem;
        background-color: #0091FF;
        border:none;
        color:#FFFFFF;
    }
}
.footer{
    display: flex;
    margin-top: 0.2rem;
    margin-left: 1.4rem;
   
   div{
    width: 0.5rem;
    height: 0.12rem;
    color: rgba(0,0,0,0.50);


   }
    div:nth-child(2){
        margin-left: 0.1rem;
        padding-left: 0.1rem;
        border-left:0.005rem solid black
    }

}
</style>